<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 2000px;
			}
			#app{
				margin-top: 500px;
			}
		</style>
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/home">home</router-link>
			<router-link to="/list">list</router-link>
			<router-link to="/detail">detail</router-link>
			<router-view></router-view>
			
		</div>
	<template id="t1">
		<div>
			<h3>home页面</h3>
		</div>
	</template>	
	
	<template id="t2">
		<div>
			<h3>列表页面</h3>
		</div>
	</template>	
	
	<template id="t3">
		<div>
			<h3>详情页面</h3>
		</div>
	</template>	
	<script>
		var routes=[
			{
				path:'/home',
				component:{
					template:"#t1"
					
				}
			},
			{
				path:'/list',
				component:{
					template:"#t2"
				}
			},
			{
				path:'/detail',
				component:{
					template:"#t3"
				}
			}
		]
		
		var router=new VueRouter({
			routes,
			scrollBehavior (to, from, savedPosition) {
			   return new Promise((resolve, reject) => {
			        setTimeout(() => {
			         resolve({ x: 0, y: 0 })
			        })					
			   })
				//console.log(savedPosition)
				// if(savedPosition){
				// 	return savedPosition
				// }else{
				// 	return {x:0,y:0}
					
				// }
				console.log(savedPosition) //点击前进后退按钮有效
			  }
		})
		var vm=new Vue({
			el:"#app",
			data:{
				
			},
			router
		})
	</script>	
	</body>
</html>
